<template>
  <div
    class="relative flex flex-col w-full transition duration-500 ease-in-out "
    :class="bgColor"
  >
    <div ref="section1" class="relative h-screen">
      <div class="flex flex-col justify-center w-full h-full text-center">
        <h1 class="text-5xl leading-normal">我们是 猫创</h1>
        <br />
        <h1 class="text-5xl leading-normal font-semibold">
          帮助你 <br />
          将你的想法创意 <br />
          落地 & 实施
        </h1>
      </div>
    </div>
    <div
      ref="section2"
      class="relative block m-auto w-full"
      style="height:300vw"
    >
      <div
        class="sticky top-0 flex justify-between items-center py-8 h-screen "
        style="width:300vw;will-change:transform;
        "
        :style="{ transform: `translateX( ${X}px)` }"
      >
        <div
          id="img1"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img2"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img3"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img4"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img5"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img6"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img7"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
        <div
          id="img8"
          class="bg-contain bg-center bg-no-repeat w-1/5 h-full"
        ></div>
      </div>
    </div>
    <div class="relative h-screen">
      <div class="flex flex-col justify-center w-full h-full text-center">
        <div class="text-5xl leading-normal font-semibold">
          我们致力于
          <br />
          帮助伙伴
          <br />
          创造价值
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const X = ref(null);
    const section1 = ref();
    const section2 = ref();

    const bgColor = ref("");

    function handleScroll() {
      console.log("section1.value.offsetHeight", section1.value.offsetHeight);
      console.log("section2.value.offsetHeight", section2.value.offsetHeight);
      // console.log("window.scrollY", window.scrollY);
      // console.log("window.innerWidth", window.innerWidth);
      if (window.scrollY >= section1.value.offsetHeight) {
        X.value = -(window.scrollY - section1.value.offsetHeight);
      }

      if (X.value <= -(section2.value.offsetHeight - window.innerWidth)) {
        X.value = -(section2.value.offsetHeight - window.innerWidth);
      }
      if (window.scrollY < section1.value.offsetHeight) {
        X.value = 0;
      }

      console.log(X.value);
    }
    function handleScroll2() {
      if (window.scrollY < section1.value.offsetHeight) {
        bgColor.value = "bg-white";
      }
      if (window.scrollY >= section1.value.offsetHeight) {
        bgColor.value = "bg-gray-800";
      }
      if (window.scrollY >= section2.value.offsetHeight) {
        bgColor.value = "bg-white";
      }
    }

    onMounted(() => {
      document.addEventListener("scroll", handleScroll);
      document.addEventListener("scroll", handleScroll2);
    });

    return { X, section1, section2, bgColor };
  },
});
</script>

<style>
#img1 {
  background-image: url("https://placekitten.com/500/900?1");
}
#img2 {
  background-image: url("https://placekitten.com/501/900?0.2132");
}
#img3 {
  background-image: url("https://placekitten.com/502/900?2");
}
#img4 {
  background-image: url("https://placekitten.com/503/900?3");
}
#img5 {
  background-image: url("https://placekitten.com/504/900?4");
}
#img6 {
  background-image: url("https://placekitten.com/505/900?5");
}
#img7 {
  background-image: url("https://placekitten.com/506/900?6");
}
#img8 {
  background-image: url("https://placekitten.com/507/900?7");
}
body {
  overflow-x: hidden;
}
</style>
